import React, { useState, useEffect } from 'react';
import { Row, Col, InputNumber, Icon } from 'antd';
import PopValue from '../../../../components/PopTab/PopValue';
import { compare } from '../../../../utils/compare';
import { DATA_TYPE_NUMBER } from 'src/utils/constant';

/** @Component WeightRuleExpress 阈值 
 * @prop {Function} onChange 默认undefined,值改变的回调方法 value
 * {
    "parameters": [
      {
        "varType": "literal",
        "valueCode": "1"
      },
      {
        "varType": "literal",
        "valueCode": "2"
      },
      {
        "varType": "field",
        "valueCode": "c"
      }
    ],

    "operators": [
      "plus",
      "star"
    ]
  }
*/
export default function WeightRuleExpress(props) {
  const [isShowParams, setIsShowParams] = useState(false);
  const { parameters = [], operators = [] } = props.value instanceof Object ? props.value || {} : {};
  // value改变，改变isShowParams
  useEffect(() => {
    props.value && props.value.parameters && props.value.parameters.length > 1 && setIsShowParams(true);
  }, [props.value]);

  useEffect(() => {
    !props.value && handleChange(0, 0);
  }, []);

  const handleChange = (index, value, name, type) => {
    const tempValue = {
      var_code: value,
      var_type: type || 'literal',
    };
    parameters[index] = { value: tempValue };
    if (name) {
      parameters[index]['value'].var_name = name;
    }
    if (isShowParams) {
      operators[0] = 'plus';
      operators[1] = 'star';
    } else {
      operators.length = 0;
    }
    const _value =
      props.value instanceof Object
        ? {
            ...props.value,
            parameters,
            operators,
          }
        : { parameters, operators };
    props.onChange && props.onChange(_value);
  };
  return (
    <Row type='flex' align='middle' gutter={2}>
      <Col>
        <InputNumber
          style={{ width: '60px', ...compare(props, 'parameters', 0, 'value', 'var_code') }}
          value={parameters[0] && parameters[0].value && parameters[0].value.var_code}
          onChange={handleChange.bind(this, 0)}
          disabled={props.disabled}
        />
      </Col>
      {isShowParams && (
        <>
          <Col>+</Col>
          <Col>
            <InputNumber
              style={{ width: '60px', ...compare(props, 'parameters', 1, 'value', 'var_code') }}
              value={parameters[1] && parameters[1].value && parameters[1].value.var_code}
              onChange={handleChange.bind(this, 1)}
              disabled={props.disabled}
            />
          </Col>
          <Col>*</Col>
          <Col>
            <PopValue
              value={
                parameters[2] ? { var_code: parameters[2].value.var_code, var_name: parameters[2].value.var_name } : {}
              }
              type={parameters[2] ? parameters[2].value.var_type : ''}
              placeholder={'右变量'}
              variable={props.variable}
              using_variables={props.using_variables}
              limitType={['field', 'feature']}
              dataType={[...DATA_TYPE_NUMBER]}
              onChange={(value) => handleChange.bind(this, 2, value.var_code, value.var_name, value.var_type)()}
              disabled={props.disabled}
              style={{ width: '60px', ...compare(props, 'parameters', 2, 'value', 'var_code') }}
            />
          </Col>
        </>
      )}
      {!props.disabled && (
        <Col>
          {isShowParams ? (
            <Icon type='double-left' style={{ cursor: 'pointer' }} onClick={(e) => setIsShowParams(!isShowParams)} />
          ) : (
            <Icon type='double-right' style={{ cursor: 'pointer' }} onClick={(e) => setIsShowParams(!isShowParams)} />
          )}
        </Col>
      )}
    </Row>
  );
}
